import { View } from '@tarojs/components'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
import GlobalFooter from '../../components/GlobalFooter'
import {AtButton, AtRadio} from "taro-ui";
import questions from '../../question/question.json'
import {useEffect, useState} from "react";
import Taro from "@tarojs/taro";

/**
 * 答题页
 */
export default () => {
  const question = questions[0];

  //当前题目序号
  const [current,setCurrent] =  useState<number>(1);

  //当前答案
  const [currentAnswer,setCurrentAnswer] = useState<String>();

  //回答列表
  const [answerList] = useState<String[]>([]);

  //当前题目
  const [currentQuestion,setCurrentQuestion] = useState(questions[0])
  const questionOptions = currentQuestion.options.map((option) =>{
    return {label:`${option.key}.${option.value}`,value:`${option.key}`}
  })

    //序号变化时，切换当前题目和当前回答
    useEffect(() =>{
      setCurrentQuestion(questions[current-1]);
      setCurrentAnswer(answerList[current - 1])
    },[current])

    return (
      <View className='doQuestion'>
        <View className='at-article__h1 title'>
          {current}、{question.title}
        </View>
        <AtRadio
          options={questionOptions}
          value={currentAnswer}
          onClick={(value) =>{
            setCurrentAnswer(value)
            answerList[current - 1] = value;
          }}
        />
        {current < questions.length && (<AtButton className='btn1' disabled={!currentAnswer} type='primary' circle onClick={() =>{
          setCurrent(current + 1)
        }}>下一题</AtButton>)}

        {current == questions.length && (<AtButton className='btn2' type='primary' circle onClick={() =>{
          //传递用户答案
          Taro.setStorageSync("answerList",answerList);

          //跳转到结果页
          Taro.navigateTo({
            url: '/pages/result/index',
          })
        }}>查看结果</AtButton>)}

        {current != 1 && (<AtButton className='btn3' type='primary' circle onClick={()=>{
          setCurrent(current - 1)
        }}>上一题</AtButton>)}

        <GlobalFooter></GlobalFooter>

      </View>

    )
}
